<template>
  <div class="comment">
    <div class="comment_title">评论管理</div>
    <!-- 表格 -->
    <el-table :data="commentData.list" style="width: 100%" id="comment_table">
      <el-table-column prop="id" label="编号" min-width="78" align="center"></el-table-column>
      <el-table-column prop="content" label="评论内容" min-width="219" align="center"></el-table-column>
      <el-table-column label="评论时间" min-width="219" align="center">
		  <template slot-scope="{row}">
              <span>{{row.commentTime | dateParse}}</span>
            </template>
	  </el-table-column>
      <el-table-column prop="orderId" label="产品ID" min-width="219" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>

	  <el-table-column label="操作" min-width="150" align="center">
		  <template slot-scope="{row}">
			  <span v-if="row.status=='审核通过'">
				  <el-button type="text" size="small" @click="deleteComment(row)">删除</el-button>
				  <el-button type="text" size="small" @click="refuseComment(row)">拒绝</el-button>
			  </span>
			  <span v-if="row.status=='审核不通过'">
				  <el-button type="text" size="small" @click="deleteComment(row)">删除</el-button>
				  <el-button type="text" size="small" @click="publishComment(row)">通过</el-button>
			  </span>
			  <span v-if="row.status=='未审核'">
				  <el-button type="text" size="small" @click="deleteComment(row)">删除</el-button>
				  <el-button type="text" size="small" @click="refuseComment(row)">拒绝</el-button>
				  <el-button type="text" size="small" @click="publishComment(row)">通过</el-button>
			  </span>
		  </template>
	  </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="comment_page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 0,
      pageSize: 5,
      total: 10,
    };
  },
  created() {
    this.loadComments();
  },
  computed: {
    ...mapState("comment", ["commentData"])
  },
  methods: {
    ...mapActions("comment", [
      "toLoadComments",
	  "toDeleteComments",
	  "toRefuseComments",
	  "toPublishComments"
	]),
	//通过审核
	publishComment(row){
		this.toPublishComments(row.id).then(res=>{
			this.loadComments();
		})
	},
	//拒绝审核
	refuseComment(row){
		this.toRefuseComments(row.id).then(res=>{
			this.loadComments();
		})
	},
    //加载
    loadComments() {
      let obj = {
        page: this.page,
        pageSize: this.pageSize
      };
      this.toLoadComments(obj).then(res => {
        this.total = this.commentData.total;
	  });
    },
    //分页
    handleCurrentChange(val) {
      this.page = val -1;
      this.loadComments();
    },
    //删除
    deleteComment(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.toDeleteComments(row.id).then(res => {
			this.$message({ type: "success", message: "删除成功" });
			this.loadComments();
        });
      });
    },
  }
};
</script>
<style scope>
.comment {
  padding: 10px;
}
.comment_title {
  border-bottom: 1px solid #ccc;
  height: 35px;
  line-height: 35px;
}
.comment_button {
  margin-top: 10px;
  position: relative;
}
.comment_button > * {
  display: inline-block !important;
}
#comment_input {
  position: absolute;
  top: -50px;
  left: 94px;
  width: 200px;
}
#comment_search {
  position: absolute;
  top: 1px;
  left: 304px;
}
.comment_page {
  margin-top: 10px;
}
</style>